<!--
 * @Author: zsc
 * @Date: 2022-06-13 21:56:52
 * @LastEditors: zsc
 * @LastEditTime: 2022-06-26 14:59:11
 * @Description:
-->

<template>

  <el-dialog
    :before-close="beforeClose"
    :visible.sync="show"
    :title="title"
    width="80%"
    @close="close"
    @closed="closed"
  >
    <div class="app-container">
      <el-card class="app-container-tools">
        <div class="app-container-tools-search">
          <span>企业名称</span>
          <el-input v-model="WHERE.buildingName" class="k-width-150-p k-mr-10" />
          <span>企业规模：</span>
          <el-select v-model="WHERE.size" placeholder="请选择" class="k-width-100-p">
            <el-option
              v-for="item in companySizeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button type="primary" @click="_search">查询</el-button>
          <el-button type="primary" @click="_reset">重置</el-button>
        </div>
        <div class="app-container-tools-action" />
      </el-card>
      <!--    功能-->
      <!--    查询条件-->
      <el-card>
        <!--    表格-->
        <el-table
          ref="tb"
          v-loading="LOADING"
          :data="TABLE_DATA"
          :size="SIZE"
          border
          :height="LIST_HEIGHT"
          style="width: 100% ;height:80%"
          @selection-change="_handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <template v-for="(item) in setting">
            <el-table-column
              v-if="item.key === 'action'"
              :key="item.id"
              :label="item.name"
              :prop="item.key"
              :width="item.value"
              :fixed="item.fixed"
            >
              <template slot-scope="scope">
                <el-button @click="handleScan(scope.row)">查看</el-button>
                <el-button @click="handleKeepAttendance(scope.row)">查看考勤</el-button>
                <el-button>人流状态</el-button>

              </template>

            </el-table-column>
            <el-table-column
              v-else-if="item.key === 'room_display'"
              :key="item.id"
              :label="item.name"
              :prop="item.key"
              :width="item.value"
              :fixed="item.fixed"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.rooms.reduce((pre,cur)=>{
                    return pre+cur.name+','
                  },'')
                }}
                </span>
              </template>

            </el-table-column>
            <el-table-column
              v-else
              :key="item.id"
              :label="item.name"
              :prop="item.key"
              :width="item.value"
            />
          </template>
        </el-table>
        <!--    分页-->
        <pagination />
        <!--    弹窗-->

        <calendar-modal :visible.sync="ATTENDANCE_VISIBLE" :type="FORM_TYPE" :data="FORM_DATA" />
        <room-scan-modal :visible.sync="scanVisible" :data="scanId" />
      </el-card>
    </div>
  </el-dialog>

</template>

<script>
import list from '@/list'
import CompanyClass from '@/models/company-class'
import { companyGetList } from '@/api/company'
import { companySizeOptions } from '@/list/data'
import calendarModal from '@/views/company/list/components/keepAttendance'
import roomScanModal from '@/views/company/list/components/scan.vue'
const companyClass = new CompanyClass()
export default {
  name: 'DeepInterpretationOrder',
  components: { calendarModal, roomScanModal },
  mixins: [list],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    buildingId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      show: false,
      companySizeOptions,
      caseRequestURLType: '',
      setting: companyClass.list(),
      ATTENDANCE_VISIBLE: false,
      scanVisible: false,
      scanId: 0,
      WHERE: {
        building_id: this.building_id
      }

    }
  },
  computed: {
    title() {
      return '公司列表'
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.show = val
        this._search()
      }
    }
  },
  created() {
    this.LIST_API = companyGetList
  },
  mounted() {
  },
  methods: {

    handleKeepAttendance(item) {
      console.log('考勤')
      this.FORM_TYPE = 'create'
      this.ATTENDANCE_VISIBLE = true
    },
    handleScan(item) {
      console.log('查看')
      this.scanVisible = true
      this.scanId = item.id
    },
    handleClose() {
      console.log('点击关闭')
      this.beforeClose()
    },
    beforeClose() {
      console.log('关闭前的回调')
      this.show = false
      this.$emit('update:visible', false)
    },
    close() {
      console.log('关闭的回调')
    },
    closed() {
      console.log('关闭动画结束后的回调')
    }
  }
}
</script>
<style lang="scss">
 @import '@/styles/list/index.scss';
</style>
